<template>
    <el-container>
        <el-main>
            <router-view :key="$route.path" />
        </el-main>
        <el-footer height="100px">
            <el-row type="flex" justify="space-between" align="middle">
                <div @click="router.push({ name: 'index' })">简介</div>
                <div @click="router.push({ name: 'oneImage', params: { page: 'member' } })">电子会员卡</div>
                <div @click="router.push({ name: 'oneImage', params: { page: 'wechar' } })">微信公众号</div>
                <div @click="router.push({ name: 'welfare' })">大润发福利官</div>
                <div @click="router.push({ name: 'poster' })">本档快报</div>
            </el-row>
        </el-footer>
    </el-container>
</template>

<script setup>
import { onBeforeMount, onBeforeUnmount, ref, watch, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const percentage = ref(100)
let timer
watchEffect(() => {
    percentage.value = 100
    clearInterval(timer)
    if (router.currentRoute.value.name !== 'index') {
        timer = setInterval(() => {
            percentage.value--
        }, 1000)
    }
})
function resetPercentage() {
    percentage.value = 100
}
onBeforeMount(() => {
    window.addEventListener('click', resetPercentage)
})
onBeforeUnmount(() => {
    window.removeEventListener('click', resetPercentage)
})
watch(
    () => percentage.value,
    (newValue, oldValue) => {
        if (newValue <= 0 && router.currentRoute.value.name !== 'index') {
            router.push({ name: 'index' })
        }
    }
)
</script>

<style scoped>
.el-container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}
.el-main {
    flex-grow: 1;
    padding: 0;
}
.el-row {
    height: 100px;
}
.el-row div {
    background-color: #409eff;
    flex-grow: 1;
    height: 100px;
    line-height: 100px;
    text-align: center;
    vertical-align: middle;
    border-radius: 15px;
    box-sizing: border-box;
    border: 1px solid white;
}
.el-row div:hover {
    cursor: pointer;
}
.el-footer {
    padding: 0;
}
</style>
